<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 登录表单区 -->
      <van-form @submit="onSubmit" class="login-form" v-model="loginInfo">
        <van-field v-model="loginInfo.username" name="用户名" placeholder="用户名/邮箱/手机号" :rules="loginUserIDRules" />
        <van-field v-model="loginInfo.password" :type="password" center clearable name="密码" placeholder="请输入密码"
          :rules="loginPassWordRules" />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" color="#00DDAA">登录</van-button>
            <van-button round block type="info" native-type="submit" class="btn-02">一键登录</van-button>
            <div class="quick-btn">
              <router-link :to="{name:'Login'}"><span class="login-method1">短信验证码登录</span></router-link>
              <router-link :to="{name:'Login'}"><span class="login-method2">手机快速注册</span></router-link>
            </div>
            <div class="footer">
              <div class="otherLogin">
                <h4>其他登录方式</h4>
              </div>
              <div class="otherLoginItem">
                <a href=""><img src="../img/QQ.png" alt=""></a>
                <a href=""><img src="../img/weixin.png" alt=""></a>
                <a href=""><img src="../img/apple.png" alt=""></a>
              </div>
              <div class="foot-text">
                <span text-align="center">登录代表您已同意<a href="">隐私政策</a></span>
              </div>
            </div>
          </div>
      </van-form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 密码显示模式
        passwordMode: true,
        loginInfo: {
          username: '',
          password: ''
        },
        // 登录校验规则
        loginPassWordRules: [{
          required: true,
          message: '请填写密码'
        }],
        loginUserIDRules: [{
          required: true,
          message: '请填写手机号码'
        }]
      }
    },
    methods: {
      onSubmit(values) {
        console.log('submit', values)
      }
    }
  }
</script>

<style scoped>
  .login-container {
    background-color: white;
    height: 100%;
  }

  .login-box {
    width: 400px;
    height: 300px;
    background-color: white;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
  }

  .login-form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    top: 50px;
  }

  .btn-02 {
    background-color: #FFFFFF;
    color: red;
    margin-top: 10px;
  }

  .quick-btn {
    color: rgba(0, 0, 0, .6);
    font-size: 10px;
    margin-top: 6px;
    overflow: hidden;
  }

  .quick-btn .login-method1 {
    float: left;
  }

  .quick-btn .login-method2 {
    float: right;
  }

  .footer {
    margin-top: 9.375rem;
    /* border-top: 1px solid rgba(0, 0, 0, .1); */
    font-size: .12rem;
  }

  .otherLogin {
    color: rgba(0, 0, 0, .2);
    width: 90px;
    padding: 0 20px 0;
    margin: 20px auto;
    line-height: 1px;
    border-left: 100px solid #ddd;
    border-right: 100px solid #ddd;
    text-align: center;
  }

  .otherLoginItem {
    padding: 15px 43px;
  }

  .otherLoginItem img {
    display: inline-block;
    color: rgba(0, 0, 0, .4);
    margin: 12px;
    background-size: 100% auto;
    padding-top: 5px;
    background-repeat: no-repeat;
  }

  .foot-text {
    color: rgba(0, 0, 0, .4);
    font-size: 10px;
    margin-top: 6px;
    overflow: hidden;
    text-align: center;
  }

  .foot-text a {
    color: #4a90e2;
  }
</style>
